<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .comment {
            font-size: 40px;
            color: #ff16cf;
        }
        
        .comment li {
            float: left;
        }
        
        ul {
            list-style: none;
        }
    </style>



</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

    <script src="../jQuery库/jquery-3.1.0.js"></script>
    <script>
        var wjx_k = "☆";
        var wjx_s = "★";
        $("li").mouseenter(function() {
            $(this).prevAll().html(wjx_s).end().html(wjx_s).nextAll().html(wjx_k)
        })
        $("ul").mouseleave(function() {
            $("li").html(wjx_k)
        })
    </script>

</body>

</html>